@import "../../../assets/styles/helper.less";

.add-modal-item {
  margin: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  + .add-modal-item {
    margin-top: 8px;
  }
  .add-modal-label {
    flex-shrink: 0;
  }
  .date-picker {
    width: 100%;
  }
  input {
    width: 100%;
  }
  @media (min-width: 500px) {
    flex-direction: row;
    align-items: center;
  }
}

.tomato-history {
  .tomato-history-tabs {
    .tomato-history-tab-pane {
      position: relative;
      border: 1px solid transparent;
      button {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 0;
        font-size: 20px;
        top: -52px;
        color: @color-text-light;
        &:hover {
          color: @color-primary;
        }
      }
      .daily-tomatoes {
        padding: 8px 16px;
        border: @border;
        border-radius: @border-radius;
        margin-bottom: 8px;
        display: flex;
        flex-direction: column;
        .title {
          padding: 8px;
          .date {
            float: left;
            margin-right: 16px;
            position: relative;
            .date-time {
              font-size: 20px;
              color: @color-text;
              position: relative;
              display: block;
              top: -4px;
            }
            .week-time {
              font-size: 12px;
              color: @color-text-light;
              position: absolute;
              right: 2px;
              bottom: -10px;
            }
          }
          .finished-count {
            font-size: 14px;
            color: @color-text-light;
          }
          .total-time {
            color: @color-text-light;
          }
          &::after {
            content: '';
            display: block;
            clear: both;
          }
        }
        .details {
          flex: 1;
        }
        @media (min-width: 500px) {
          padding: 16px;
          flex-direction: row;
          .title {
            flex-shrink: 0;
            margin-right: 8px;
            padding: 0;
            .date {
              float: none;
              .date-time {
                position: static;
                margin-right: 4px;
                display: inline-block;
              }
              .week-time {
                position: static;
              }
            }
          }
        }
      }
      .pagination {
        margin-top: 16px;
        text-align: center;
      }
    }
  }
}

.todo-history {
  .todo-history-tabs {
    .todo-history-tab-pane {
      border: 1px solid transparent;
      .daily-todos {
        padding: 8px 16px;
        border: @border;
        border-radius: @border-radius;
        margin-bottom: 8px;
        display: flex;
        flex-direction: column;
        .title {
          padding: 8px;
          .date {
            .date-time {
              font-size: 20px;
              margin-right: 4px;
              color: @color-text;
            }
            .week-time {
              color: @color-text-light;
              font-size: 12px;
            }
          }
          .finished-count {
            font-size: 14px;
            color: @color-text-light;
          }
        }
        .details { flex: 1; }
        @media (min-width: 500px) {
          padding: 16px;
          flex-direction: row;
          .title {
            padding: 0;
            flex-shrink: 0;
            margin-right: 8px;
            .date {
              .date-time {
                margin-right: 4px;
              }
            }
          }
        }
      }
      .pagination {
        margin-top: 16px;
        text-align: center;
      }
    }
  }
}